<style lang="less" scoped>
    .header-wrapper{
        background-color: #fff;
        z-index: 999;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 0 100px;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 720px;

        @media screen and (max-width: 1100px) {
            padding: 0 40px 0 70px;
        }

        .logo{
            display: block;
            width: 80px;
            height: 100%;
            background-image: url();
            background-size: contain;
            background-repeat: no-repeat;
            background-position-y: 50%;
        }

        .user-info{
            display: flex;
            column-gap: 30px;
            align-items: center;
            height: 100%;

            .info{
                cursor: pointer;
                display: flex;
                align-items: center;
                color: #222;
                position: relative;
                height: 100%;

                span{
                    padding-left: 6px;
                    padding-top: 2px;
                    font-size: 14px;
                }

                .info-block{
                    position: absolute;
                    top: 65px;
                    left: -33px;
                    display: none;
                    flex-direction: column;
                    box-shadow: 0 0px 26px rgba(0, 0, 0, .15);
                    border-radius: 4px;
                    padding: 8px 0;
                    z-index: 999;
                    background-color: #fff;
                    a{
                        width: 125px;
                        height: 38px;
                        line-height: 38px;
                        text-decoration: none;
                        color: #222;
                        font-size: 14px;
                        padding: 0 50px 0 20px;
                    }
                    a:hover{
                        background-color: #f5f5f5;
                    }
                }
            }
            .info:hover{
                color: #666;

                .info-block{
                    display: flex;
                }
            }

            .line{
                height: 16px;   
                width: 1px;
                background-color: #e8e8e8;
            }

            .user{
                cursor: pointer;
                display: flex;
                align-items: center;
                column-gap: 8px;
                font-size: 14px;
                position: relative;
                height: 100%;

                .user-block{
                    position: absolute;
                    top: 65px;
                    left: -180px;
                    display: none;
                    flex-direction: column;
                    box-shadow: 0 0px 26px rgba(0, 0, 0, .15);
                    border-radius: 4px;
                    z-index: 999;
                    background-color: #fff;
                    h1{
                        padding: 20px 30px;
                        font-size: 20px;
                    }
                    > div{
                        column-gap: 10px;
                        display: flex;
                        align-items: center;
                        width: 330px;
                        height: 45px;
                        line-height: 45px;
                        text-decoration: none;
                        color: #222;
                        font-size: 14px;
                        padding: 0 30px;
                    }
                    > div:hover{
                        background-color: #f5f5f5;
                    }

                    > div:nth-of-type(1){
                        column-gap: 10px;
                        span:nth-of-type(2){
                            display: block;
                            font-size: 12px;
                            padding: 0 5px;
                            height: 20px;
                            line-height: 20px;
                            color: #999;
                            background-color: #f5f5f5;
                        }
                    }
                    > div:not(:nth-of-type(1)){
                        i{
                            margin-top: -1px;
                        }
                    }
                }
            }
            .user:hover{
                .user-block{
                    display: flex;
                }
            }
        }
    }
</style>

<template>
    <div class="header-wrapper">
        <router-link to="/" class="logo"></router-link>
        <div class="user-info">
            <div class="info">
                <el-icon :size="22">
                    <Bell />
                </el-icon>
                <span>消息</span>

                <div class="info-block">
                    <router-link to="#">评论</router-link>
                    <router-link to="#">粉丝</router-link>
                    <router-link to="#">点赞</router-link>
                    <router-link to="#">私信</router-link>
                </div>
            </div>
            
            <div class="line"></div>

            <el-button v-if="!$store.state.user" type="primary" @click="showLogin = true" >登录/注册</el-button>

            <div class="user" v-if="$store.state.user" >
                <el-avatar :size="32" src="https://p6.toutiaoimg.com/large/da940012fdbc8bf93d8f" />
                <span>{{ $store.state.user.name }}</span>

                <div class="user-block">
                    <h1>下午好，{{ $store.state.user.name }}</h1>
                    <div @click="logout">
                        <el-icon :size="18"><SwitchButton /></el-icon>
                        <span>退出登录</span>
                    </div>
                </div>
            </div>
        </div>

        <Login v-show="showLogin" @close="showLogin = false"></Login>
    </div>
</template>

<script>
import { Bell, SwitchButton, Setting } from '@element-plus/icons-vue'
import Login from '@/components/Login'
import { logout } from '@/api/user.js'

export default {
    name: 'Header',
    components: {
        Bell,
        Setting,
        SwitchButton,
        Login
    },
    data () {
        return {
            showLogin: false
        }
    },
    methods: {
        async logout () {
            let result = await logout()
            if (result instanceof Error) ElMessage.error(result.message)

            this.$store.state.user = null
            ElMessage.success('退出登录成功')
        }
    }
}
</script>